<template>
	<view class="content">
		<navbar :isback="isback" :title="title"></navbar>

		<canvas style="width: 100vw; height: 80vh;" disable-scroll="true" canvas-id="firstCanvas" id="firstCanvas"
			@touchstart="canvasStart" @touchmove="canvasMove" @touchend="canvasEnd"></canvas>

		<view class="footer">
			<view class="setting">
				<u-button type="success" size="mini" @click="finish" style="margin: 10rpx 30rpx;">保存图片</u-button>
				<u-button type="success" size="mini" @click="clear" style="margin: 10rpx 30rpx;">清除</u-button>
			</view>
			
			<view class="inp">
				<text>线条粗细:</text>
				<view style="display: flex;">
					<view class="numBorder" v-for="(item,index) in 11" :style="{background: size==item+1?color:''}" :key="index" @click="confirmSize(item+1)">{{item+1}}</view>
				</view>
			</view>
			<view class="inp">
				<text>线条颜色:</text>
				<view style="display: flex;">
					<view v-for="(item,index) in colorList" :class="color == item.color?'border':''" :key="index" :style="{marginLeft: '10rpx',width: '50rpx',height: '50rpx',background:item.color}" @click="confirmColor(item.color)"></view>
				</view>
			</view>
			<!-- <view class="right" @click="clearChoose">{{choose?'请选择':'清除选中区域'}}</view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '趣味画板',
				isback: true,
				context: '',
				points: [], //路径点集合
				clearline: [],  // 最后一步的起止坐标
				canvasSetp: 0,  // 画笔步数
				choose: false,
				colorList:[
					{color: 'red'},
					{color: 'black'},
					{color: 'green'},
					{color: 'yellow'},
					{color: 'blue'},
					{color: 'purple'},
					{color: 'gray'},
					{color: 'brown'},
					{color: 'tan'},
				],
				color: 'black',
				size: 2,
			}
		},
		onLoad() {
			this.context = uni.createCanvasContext('firstCanvas', this);
			this.context.setLineWidth(2);
			this.context.setStrokeStyle('black');
		},
		onReady: function(e) {
			
		},
		methods: {
			confirmSize(size){
				this.size = size;
				this.context.setLineWidth(size)
			},
			confirmColor(color){
				this.color = color;
				this.context.setStrokeStyle(color)
			},
			// 手指触摸动作开始
			canvasStart(e) {
				// console.log(e.changedTouches[0]);
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};

				/* **************************************************
				    #由于uni对canvas的实现有所不同，这里需要把起点存起来
				 * **************************************************/
				this.points.push(startPoint);

				//每次触摸开始，开启新的路径
				this.context.beginPath();
				
				
				
				this.clearline[this.canvasSetp] = [];
				this.clearline[this.canvasSetp].push(startPoint);
				
				
			},
			canvasMove(e) {
				// console.log(e.changedTouches[0]);
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
				
				// console.log(this.clearline)
				
				
				this.clearline[this.canvasSetp].push(movePoint);
				
				
			},
			canvasEnd(e) {
				this.points = [];
				
				
				this.canvasSetp++
				
				
				
			},
			draw() {
				let point1 = this.points[0]
				let point2 = this.points[1]
				this.points.shift()
				this.context.moveTo(point1.X, point1.Y)
				this.context.lineTo(point2.X, point2.Y)
				this.context.stroke()
				this.context.draw(true)
			},
			clearChoose(){
				if(!this.choose){
					this.choose = true;
				}
				
			},
			//清空画布
			clear() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.context.clearRect(0, 0, canvasw, canvash);
						that.context.draw(true);
						
						that.clearline = [];
						that.canvasSetp = 0;
					},
				})
			},
			// 计算清空位置和面积
			mianji(){
				let that = this;
				// console.log(that.clearline);
				let clearline = that.clearline[that.clearline.length-1];
				let clearX = [];
				let clearY = [];
				clearline.forEach((item,index) =>{
					clearX.push(item.X);
					clearY.push(item.Y);
				})
				clearX.sort(function(a, b){return b - a})
				clearY.sort(function(a, b){return b - a})
				let clearW = clearX[0] - clearX[clearX.length-1] + 3;
				let clearH = clearY[0] - clearY[clearY.length-1] + 3;
				let clearStartX = clearX[clearX.length-1] - 2;
				let clearStartY = clearY[clearY.length-1] - 2;
				
				// this.context.rect(clearStartX, clearStartY, clearW, clearH);
				// this.context.fillStyle = "red";
				// this.context.stroke();
				that.context.clearRect(clearStartX, clearStartY, clearW, clearH);
				that.context.draw(true);
				that.clearline.splice(that.clearline.length-1,1)
			},
			//完成绘画并保存到本地
			finish() {
				if(this.canvasSetp == 0){
					uni.showToast({
						title: '请开始你的表演',
						icon: 'none'
					})
					return
				}
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						console.log(res);
						let path = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success(save) {
								console.log(save);
								if(save.errMsg == "saveImageToPhotosAlbum:ok"){
									uni.showModal({
										title: '保存成功!',
										content: '恭喜您保存成功DIY趣味画板',
										showCancel: false
									})
								}
							}
						})
					}
				})
			},
		},
		onShareAppMessage(res) {
			// console.log(res);
			let title = '';
			if(res.from === 'button'){
				title = res.target.dataset.item.name + '邀请您欣赏日记《' + res.target.dataset.item.title + '》'
			}else{
				let userInfo = uni.getStorageSync("userInfo");
				title = (userInfo?userInfo.name:'一团团') + '邀请您分享日记';
			}
			
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '',
				desc: '',
				content: ''
			}
		},
	}
</script>

<style scoped>
	.footer{
		border-top: 1rpx solid #999999;
		display: flex;
		flex-direction: column;
		
	}
	.setting{
		display: flex;
	}
	
	.inp>text{
		line-height: 50rpx;
		margin-left: 10rpx;
	}
	
	.numBorder{
		margin-left: 10rpx;
		width: 50rpx;
		height: 50rpx;
		border: 2rpx solid #000000;
		text-align: center;
		line-height: 50rpx;
		border-radius: 4rpx;
		color: #ff7f00;
	}
	
	.border{
		border: 4rpx solid #4CD964;
	}
</style>
